/**
 * Created by levy on 16/6/16.
 */
import {shopping} from "../const/shopping.js";
import Cart from "../components/shopping/Cart";

const lf = liefeng,
    R = React,
    RC = React.createClass,
    ajax = lf.utils.ajax,
    doLocation = lf.appJs.doLocation,
    log = lf.utils.log;

/**
 * props:
 typeList[]
 getItemList(type)
 */
let Header = React.createClass({
    // liftClick(){
    //     lf.appJs.doClose();
    // },
    componentDidMount(){

        $('.left-icon').on('tap', ()=> {
            lf.appJs.doClose();
        })

        $('.toIndex').on('tap', ()=> {
            doLocation('shopping-index.html', '')
        })

        $('.toKind').on('tap', ()=> {
            doLocation('shopping-kinds.html', '')
        })

    },
    render(){
        return (
            <header className="header">
                <div className="header-icon left-icon">
                    <i className="mui-icon mui-icon-arrowleft"/>
                </div>
                <div className="tap">
                    <a className="toIndex" href="javascript:;">首页</a>
                    <a className="toKind active" href="javascript:;">分类</a>
                </div>
                <div className="header-icon">
                    <i className='mui-icon mui-icon-search'/>
                </div>
            </header>
        )
    }
})


const SideBar = RC({
    render() {
        let list = this.props.typeList.map((item, i) => {
            return <p data-type={item.catId} className={"type "}>{item.catName}</p>
        });

        return <div className="sidebar" ref="sidebar">
            <div className="fixed-wrapper">
                {list}
            </div>
        </div>
    },
    componentDidMount() {
        const me = this;

        let $typeList = $(R.findDOMNode(this.refs.sidebar)).find('.type');

        $typeList.on('touchstart', function () {
            let $this = $(this);

            $this.addClass('active')
                .siblings('.type').removeClass('active');

            me.props.getItemList($this.data('type'));
        });

        //默认一进来点击第一个
        $typeList.eq(0).trigger('touchstart');

    }
});

/**
 * props:
 itemList[]
 */
const Content = RC({
    render() {
        let list = lf.utils.to2DArray(this.props.itemList, 3).map(array => {
            return <div className="flex">
                {
                    array.map(item => {
                        return (
                            <div className="icon-item flex col space-between " style={{width:'33.33%'}}
                                 onTouchEnd={() => lf.bridgeJs.doAction
                                     (`shopping-item-list.html?categoryId=${item.catId}`, item.catName)}>
                                <p className={'icon ' + (item.icon || 'others')}/>
                                <p className="icon-text">{item.catName}</p>
                            </div>
                        )
                    })
                }
            </div>
        });

        return <div className="content" ref="content">
            {list}
        </div>
    },
    componentDidMount() {
    }
});

const Root = RC({
    getInitialState() {
        return {
            itemList: [],
            cartNum: 0,
        }
    },
    getItemList(type) {
        const props = this.props;

        if (!type) type = props.typeList[0].catId;

        this.setState({
            itemList: props.map[type]
        });
    },
    getCartNum(user) {
        ajax({
            url: shopping.api.prefix + shopping.api.cart.getGoodsNum,
            data: {
                custGlobalId: user.globalId || (user.custLoginVo && user.custLoginVo.globalId),
            },
            success: function (data) {
                this.setState({cartNum: data.data});
            }.bind(this)
        });
    },
    componentWillMount() {
        let me = this;

        lf.appJs.getUser((user) => {
            me.getCartNum(user);
        });

        lf.appJs.refresh((user) => {
            me.getCartNum(user);
        });
    },
    render() {
        return (
            <div>
                <Header />
                <div className="shopping index kinds flex">
                    <SideBar typeList={this.props.typeList} getItemList={this.getItemList}/>
                    <Content itemList={this.state.itemList}/>
                    <Cart num={this.state.cartNum}/>
                </div>
            </div>
        )
    }
});

ajax({
    url: shopping.api.prefix + shopping.api.index,
    success(data) {
        if (data.code != 200) alert('没有获取到数据');
        else {
            R.render(<Root typeList={data.data.parentCategoryList}
                           map={data.data.childCategoryMap}/>,
                document.getElementById('root'));
        }
    }
});
